<template>
  <page-wrap stay-still back hide-tab title="附件简历预览">
    <view class="all">
      <view class="refresh">
        <u-icon name="error-circle-fill"></u-icon>
        资料更新后需要手动刷新生成新简历
        <span class="clickFresh" @click="createResume">点击刷新</span>
      </view>
      <!-- 排列三 -->
      <u-image :src="attPic" mode="widthFix" show-error="more-dot-fill" @click="previewImg(attPic)"></u-image>
      <view class="bottomSpace"></view>
      <view class="bottomBtn">
        <view class="optionBtn" @click="save"><img :src="saveImg" />保存</view>
        <view class="optionBtn white" @click="changeWish"><img :src="changeImg" />更换</view>
        <view class="optionBtn white" @click="editResume"><img :src="editImg" />编辑</view>
      </view>
    </view>

    <u-popup v-model="showWish" mode="bottom" height="90vh" closeable>
      <view class="chooseTemplate">
        <view v-for="item in templateList" :key="item.value">
          <view>
            <image :src="item.url" class="img"></image>
            <view class="desc">{{ item.desc }}</view>
          </view>
        </view>
        <view class="produce-btn">
          <view class="btn" @click="showWish = false">选择此模板</view>
        </view>
      </view>
    </u-popup>
  </page-wrap>
</template>

<script>
// import html2canvas from 'html2canvas'
import { getMyIntendedTradeList } from "@/api/index";
import {
  createResumeAttachment,
  getPersonResumeAttachment,
} from "@/api/modules/resumeCreate";

export default {
  data() {
    return {
      attPic: "",
      id: "",
      saveImg: this.$imgBase + "resume/resumeTemplate/save.png",
      changeImg: this.$imgBase + "resume/resumeTemplate/change.png",
      editImg: this.$imgBase + "resume/resumeTemplate/edit.png",
      allAimList: [],
      showWish: false,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      templateList: [
        {
          value: 1,
          url: this.$imgBase + "resume/template.png",
          desc: "深蓝通用简历",
        },
      ],
    };
  },
  onLoad(option) {
    console.log(option);
    this.id = option.id;
    this.attPic = decodeURIComponent(option.attPic);
    console.log("this.attPic", this.attPic);
  },
  methods: {
    previewImg(logourl) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = logourl;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    createResume() {
      let param = {
        personId: this.personId,
        temId: "1",
        attName: null,
        attType: "1",
        attStatus: "2",
      };
      createResumeAttachment(param).then((res) => {
        if (+res.code === 200) {
          uni.showToast({ icon: "none", title: "简历提交成功" });
          uni.showLoading({
            title: "简历正在生成",
            mask: true,
          });
          this.startTime = new Date().getTime();
          this.getResumeTime();
        } else {
          uni.showToast({ icon: "none", title: res.status_desc });
        }
      });
    },
    getResumeTime() {
      if (new Date().getTime() - this.startTime > 30 * 1000) {
        clearTimeout(this.timer);
        uni.showToast({ icon: "none", title: "服务器繁忙，请稍后重试" });
        return;
      }
      // 3s一次, 轮询中
      this.timer = setTimeout(() => {
        this.getResume(); // 调用轮询
      }, 2000);
    },
    getResume() {
      let param = {
        personId: this.personId,
        temId: "1",
      };
      getPersonResumeAttachment(param)
        .then((res) => {
          if (res && res.data.attPic) {
            console.log("成功了");
            uni.hideLoading();
            clearTimeout(this.timer);
            this.attPic = res.data.attPic;
            this.id = res.data.id;
          } else {
            clearTimeout(this.timer);
            // 没成功,调用轮询
            this.getResumeTime();
          }
        })
        .catch((err) => {
          // 请求错误,也继续轮询
          this.getResumeTime();
        });
    },
    changeWish() {
      this.showWish = true;
      // this.getMyIntendedTradeList();
    },
    getMyIntendedTradeList() {
      let param = {
        person_id: this.personId,
      };
      getMyIntendedTradeList(param).then((res) => {
        if (+res.code === 200) {
          this.allAimList = res.data.myTended || [];
        }
      });
    },
    editResume() {
      uni.navigateTo({
        url: `/pagesSub/resume/resumeTemplate/resumeDetail/editResumeTemplate`,
      });
    },
    save() {
      uni.navigateTo({
        url: `/pagesSub/resume/resumeTemplate/resumeDetail/dentToEmail?id=${this.id}&ifSave=1`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.all {
  position: relative;
  .refresh {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 70rpx;
    align-items: center;
    .clickFresh {
      color: #d9001b;
      text-decoration: underline;
    }
  }
}
.bottomSpace {
  height: 130rpx;
  width: 100%;
}

.bottomBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .optionBtn {
    margin: 15rpx;
    width: 180rpx;
    height: 70rpx;
    background: #d9001b;
    border-radius: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    box-shadow: 5px 5px 10px #cecdcd;
  }
  .white {
    color: #d9001b;
    background: #fff;
  }
  img {
    width: 55rpx;
    height: 55rpx;
    margin-right: 5rpx;
  }
}
.preview {
  position: relative;
  .wishContent {
    padding: 60rpx;
    min-height: 800rpx;
    .title {
      font-size: 22px;
      font-weight: 600;
    }
    .desc {
      color: #6b6b6b;
      margin: 20rpx 0;
    }
    .card {
      margin-bottom: 20rpx;
      box-shadow: 0px 5px 20px #e0dfdf;
      border-radius: 10rpx;
      display: flex;
      height: 200rpx;
      padding: 20rpx 20rpx 20rpx 34rpx;

      .cardRight {
        width: 220rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .chooseBtn {
          color: #fff;
          background: #f75a3e;
          border: none;
          width: 180rpx;
          height: 80rpx;
          line-height: 70rpx;
          font-size: 16px;
        }
      }
      .cardLeft {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cardLeft_title {
          font-size: 16px;
          font-weight: 900;
        }
        .cardLeft_money {
          font-size: 14px;
          color: #5f5d5d;
        }
        .cardLeft_type {
          font-size: 12px;
          color: #888;
        }
      }
    }
  }
}
.img {
  width: 200rpx;
  height: 300rpx;
  border: 2px solid #f75a3e;
}
.chooseTemplate {
  padding: 60rpx 0 100rpx 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.desc {
  text-align: center;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  color: #f75a3e;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
  margin-bottom: 24rpx;
  width: 200rpx;
}
.produce-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 32rpx;
  position: fixed;
  bottom: 0rpx;
  padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
  .btn {
    width: 100%;
    background: #f75a3e;
    color: #fff;
    font-size: 14px;
    height: 80rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
  }
}
</style>
